/*
 * @Author: Setsuna
 * @Email: 601890383@qq.com
 * @FilePath: \src\pages\QuotaManage\QuotaImport\List\components\ImportRecordDetailModal.tsx
 * @Date: 2021-08-23 18:04:55
 * @LastEditTime: 2023-06-16 12:58:54
 */

import React from 'react'
import { http, UdForm } from '@/lib'
import { Select, Spin, Input } from 'antd'
import quotaApis from '@/apis/AboutQuota'
import ProcessList from '@/components/ProcessList'
import { WithToolbar } from '@/components/PhotoView'
import TextArea from 'antd/lib/input/TextArea'
export default class ImportRecordDetailModal extends React.Component<any> {
  private labelCol: any = { span: 2 }
  protected recordDetailForm: any
  private MATTER_ENUM = {
    QUOTACHANGE: '客户标准配额',
    ACTUAL: '客户实际配额',
    ADJUSTMENT: '客户间配额调整',
    MODULATION: '客户配额调整',
  }
  state = {
    loading: false,
    recordDetail: {},
  }
  render() {
    return (
      <Spin spinning={this.state.loading}>
        <div className="ant-modal-title">申请信息</div>
        <UdForm
          labelCol={this.labelCol}
          getForm={form => (this.recordDetailForm = form)}
          values={this.state.recordDetail}
          items={[
            { id: 'brandName', label: '品牌公司', render: <Input readOnly={true} /> },
            { id: 'prodBarname', label: '配额品项', render: <Input readOnly={true} /> },
            { id: 'belongAreaName', label: '片区', render: <Input readOnly={true} /> },
            { id: 'stageYear', label: '考核年度', render: <Input readOnly={true} /> },
            { id: 'stageName', label: '考核阶段', render: <Input readOnly={true} /> },
            { id: 'quotaValidTime', label: '配额有效期', render: <Input readOnly={true} /> },
            {
              id: 'matterText',
              label: '文件类型',
              render: <Input readOnly={true} />,
            },
            { id: 'remark', label: '备注',  render: <TextArea rows={3} readOnly />},
            {
              label: '申请文件',
              id: 'files',
              render: (
                <>
                  <WithToolbar
                    imagesList={this.state?.recordDetail?.['quotaApplyDetailFileRespVoList'] || []}
                    type="processList"
                  />
                </>
              ),
            },
            {
              label: '附件',
              id: 'fileCertificate',
              render: (
                <>
                  <WithToolbar
                    imagesList={this.state?.recordDetail?.['quotaApplyDetailCertificateRespVoList'] || []}
                    type="processList" icon={false}
                  />
                </>
              ),
            },
          ]}
        />
        <ProcessList record={this.state.recordDetail} />
      </Spin>
    )
  }

  componentDidMount() {
    let { record } = this.props
    this.getManageImportDetail(record.id)
  }

  private getManageImportDetail = (id: number | string) => {
    http.get(quotaApis.getManageImportDetail, { params: { id } }).then(res => {
      let { data } = res
      data.matterText = this.MATTER_ENUM[data.matter]
      this.setState({ recordDetail: data })
    })
  }

  private onOk = e => {
    e.close()
  }
}
